<%--
  Created by IntelliJ IDEA.
  User: wsl
  Date: 2021/10/13
  Time: 20:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
        $(function () {
            //1.用户名失去焦点的操作
            $("#username").blur(function () {

                //2.获取用户名
                var name = $(this).val();

                //3.判断用户名是否为空和空串
                if (name != null && name != ""){

                    //4.向后台发送请求，验证用户名
                    $.ajax({
                        url:"/checkName",
                        type:"GET",
                        data:{username:name},
                        dataType:"json",
                        success:function (data) {
                           if (data.flag){
                               //设置span的内容体
                               $("#spanMsg").html("<font style='color: red'>"+ data.msg +"</font>");
                           } else {
                               //设置span的内容体
                               $("#spanMsg").html("<font style='color: green'>"+ data.msg +"</font>");
                           }
                        },
                        error:function () {
                             alert("请求处理失败！");
                        }
                    });
                }
            });
        });

    </script>

</head>
<body>
    <form action="#" method="post">
        用户名：<input type="text" id="username" name="username" placeholder="请输入用户名"/>
               <span id="spanMsg" style="color: red"></span><br>
        密  码：<input type="password" id="password" name="password" placeholder="请输入密码"/>
    </form>
</body>
</html>
